<%@ page import="twitter4j.Twitter" %>
<%@ page import="twitter4j.User" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="true" %>
<html>
<head>
	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/document.css" />

	<!-- load Dojo -->
      <!--  script type="text/javascript" src="//localhost:8081/staticresources/javascriptlib/dojo/dojo/dojo.js"></script-->
      <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>          
      <script data-dojo-config="async: true"></script>         

	<script>
	if(typeof(dojo) !== "undefined") {
		console.log("dojo loaded");
	}else{
		console.log("dojo did not loaded");
	}

    </script>

	<!--  script type="text/javascript" src="../resources/scripts/createArticle.js"></script-->
	<script type="text/javascript" src="<c:url value="/resources/scripts/footballblogApiClient.js" />"></script>

	<title>Update Article</title>
</head>
<body class="claro">

<jsp:include page="header.jsp"/>

<h1>
	Update Article!  
</h1>

<P>  The time on the server is ${serverTime}. </P>

	<%if(null == session.getAttribute("twitter")){%>
    <a href="../twitter/signin?redirectUrl=/test/updatearticle"><img src="../resources/images/Sign-in-with-Twitter-darker.png"/></a>
	<%}
	else{%>
	<h1>Welcome ${twitter.screenName} (${twitter.id})</h1>
	<%
		Twitter twitter = (Twitter) session.getAttribute("twitter");
		User twitterUser = twitter.showUser(twitter.getId());
		long id = twitter.getId();
		String name = twitterUser.getName();
		String screenName = twitterUser.getScreenName();
		String picUrl = twitterUser.getProfileImageURL();
		String bigPicUrl = twitterUser.getBiggerProfileImageURL();
		String miniPicUrl = twitterUser.getMiniProfileImageURL();
	%>

	<input id="articleId" value="${articleDto.articleId}" type="hidden"/>				
	<input id="authorType" value="twitter" type="hidden"/>				
	<input id="authorExternalId" value="<%= id %>" type="hidden"/>			
	<input id="authorName" value="<%= name %>" type="hidden"/>			
	<input id="authorScreenName" value="<%= screenName %>" type="hidden"/>			
	<input id="authorPicUrl" value="<%= picUrl %>" type="hidden"/>			
	<input id="authorBigPicUrl" value="<%= bigPicUrl %>" type="hidden"/>			
	<input id="authorMiniPicUrl" value="<%= miniPicUrl %>" type="hidden"/>			
	
<form id="articleInputForm">
	<table>
		<tr>
			<td>Article ID:</td><td>${articleDto.articleId}</td>
		</tr>
	</table>
	
	<table>
		<tr>
			<td>Author Details:</td>
			<td><img src="<%= picUrl %>"/><br><%= name %></td>			
		</tr>
		<tr>
			<td>Update Article Title:</td><td><input type="text" id="articleTitle" size=107 value="${articleDto.articleTitle}"></td>
		</tr>
		<tr>
			<td>Update Article Content:</td><td><textarea id="articleContent" cols=80 rows=20>${articleDto.articleText}</textarea></td>
		</tr>
		<tr>
			<td></td><td><input type="button" id="formButton" form="articleInputForm" value="Submit Article"></td>
		</tr>
	</table>
</form>
<script>
	require(["footballblog/FootballblogApiClient", "dojo/dom", "dojo/dom-attr", "dojo/on"], 
			function(FootballblogApiClient, dom, domattr, on){
		
		on(dom.byId("formButton"), "click", function(evt){
			console.log("in very new onSubmitArticle inline function");
			var apiClient = new FootballblogApiClient();
			apiClient.putArticle(domattr.get(dom.byId("articleId"), "value"), domattr.get(dom.byId("articleTitle"), "value"), 
					domattr.get(dom.byId("articleContent"), "value"), function(){
				console.log("in callback for update");
			});
				
		});
	});
</script>
		<%}%>
</body>
</html>
